<template>
  <view class="d-flex flex-column overflow-hidden" style="background-color: #e8e8e8;">
    <scroll-view scroll-y="true" class="flex-grow-1 d-flex flex-column overflow-scroll">
      <view class="d-flex flex-column justify-content-end"
            style="height:20rem;background-color: #9ad600;background-image: url('/static/切图/首页/banner.png');
          background-repeat: no-repeat;background-size: 100% 100%;">
        <view class="mx-2 p-2 d-flex justify-content-between align-items-center bg-white rounded rounded-2">
          <view class="">
            <view class="fw-bold" style="font-size: 0.9rem">
              Join the group to get coupons
            </view>
            <view class="h5">
              入群即得优惠券
            </view>
          </view>
          <view class="ratio" style="width: 2rem;--bs-aspect-ratio:200%">
            <image src="@/static/切图/首页/图层21.png"/>
          </view>
          <view class="p-2 rounded rounded-3" style="background-color: #abce1a">
            <text>立即入群</text>
          </view>
        </view>
      </view>
      <WalletCpt class="mx-2 my-2"></WalletCpt>
      <view class="mx-2 mt-2 d-flex justify-content-between">
        <view v-for="(item,index) in itemList2" :key=index class="col-5 flex-grow-1 d-flex flex-column bg-body item2">
          <view class="ps-2 pt-3 d-flex align-items-center">
            <view class="fw-bold h5">{{ item.name }}</view>
            <view class="ms-2 ratio ratio-1x1" style="width: 0.8rem">
              <image class="moreIcon" src="@/static/切图/首页/形状2.png"/>
            </view>
          </view>
          <view class="d-flex p-5">
            <view class="ratio ratio-1x1">
              <img :src="item.icon"/>
            </view>
          </view>
        </view>
      </view>
      <view class="mx-2 mt-2 d-flex">
        <view class="d-flex flex-column justify-content-between">
          <view v-for="(item,index) in itemList3" :key=index
                class="flex-grow-1 d-flex justify-content-center align-items-center bg-body p-2 item4">
            <view class="ratio ratio-1x1" style="width: 2rem">
              <image :src="item.icon"/>
            </view>
            <view class="ms-2 h4">{{ item.name }}</view>
          </view>
        </view>
        <view class="flex-grow-1 ms-2 d-flex flex-column bg-body">
          <view class="p-2 d-flex justify-content-between">
            <view class="text-center h5 fw-bold">限时秒杀</view>
            <view class="text-secondary">今日已结束</view>
          </view>
          <view class="d-flex mx-2">
            <view v-for="(item,index) in itemList4" :key=index class="col-5 flex-grow-1 item2">
              <view class="ratio ratio-4x3">
                <image :src="item.icon"/>
              </view>
              <view class="mt-2">
                <text class="h5 text-danger">￥{{ item.newPrice }}</text>
                <text class="text-secondary">￥{{ item.oldPrice }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
<!--    <ToolBar class="w-100"></ToolBar>-->
  </view>
</template>
<script>
import WalletCpt from "../component/WalletCpt.vue";

export default {
  name: "HomePage",
  components: {
    WalletCpt,
  },
  data() {
    return {
       itemList2: [
        {
          name: "立即点餐",
          icon: "/static/切图/首页/图层23.png"
        },
        {
          name: "会员码",
          icon: "/static/切图/首页/扫码.png"
        }
      ],itemList3: [
        {
          icon: '/static/切图/首页/券包.png',
          name: '超值券包',
        },
        {
          icon: '/static/切图/首页/团餐.png',
          name: '企业团餐',
        },
      ],
      itemList4: [
        {
          icon: "/static/切图/首页/图层23.png",
          newPrice: "5.9",
          oldPrice: "9"
        },
        {
          icon: "/static/切图/首页/图层23.png",
          newPrice: "5.9",
          oldPrice: "9"
        },
      ],
    }
  }
}
</script>

<style scoped lang="less">
.item2:nth-child(2) {
  margin-left: 0.5rem;
}

.item4:nth-child(2) {
  margin-top: 0.5rem;
}
</style>